<template>
  <div class="app">
   <el-row :gutter="12" class="userInfo">
      <el-col :span="50">
         <el-card shadow="always" body-style="height:350px">
            <div class="aside">
             <el-menu active-text-color="#ffd04b">  
               <el-menu-item index="1">
                  <a href="#/user/profile" class="tag">我的资料</a>
               </el-menu-item>
               <el-menu-item index="2">
                  <a href="#/user/blog" class="tag">我的博客</a>
               </el-menu-item>
               <el-menu-item index="3">
                  <a href="#/user/follow" class="tag">我的关注</a>
               </el-menu-item>
               <el-menu-item index="4">
                  <a href="#/user/fans" class="tag">我的粉丝</a>
               </el-menu-item>
               <el-menu-item index="5">
                  <a href="#/user/chatroom" class="tag">在线聊天室</a>
               </el-menu-item>
             </el-menu>
            </div>
         </el-card>
      </el-col>
      <el-tabs type="border-card" style="height:500px" class="border-card">
      <el-tab-pane label="撰写博客">
         <div class="choice">
         <el-button type="primary" icon="el-icon-edit" round size="small" style="width:150px">
            <router-link to="/blog/fwb" target="_blank" style="text-decoration:none">
            <span class="editfont">富文本编辑器 </span>
            </router-link>
         </el-button>
         <el-button type="primary" icon="el-icon-edit" round size="small" style="width:150px">
            <router-link to="/blog/markdown" target="_blank" style="text-decoration:none">
            <span class="editfont">MarkDown编辑器</span>
            </router-link>
         </el-button>
         </div>
      </el-tab-pane>
      <el-tab-pane label="文章管理">
         <div class="main">
            <div v-for="i in blogpool" class="list">
               <!-- 渲染数据 -->
               <div  v-if="i.IsDeleted==0">
                  <div class="pagenavbar">
                     <div class="title">
                        <a :href="i.BlogUrl" target="_blank">
                        <p class="font1" v-if="i.EnableComment==1"><span class="banfont">禁止评论</span>{{i.BlogTitle}}</p>
                        <p class="font1" v-else-if="i.EnableComment==0">{{i.BlogTitle}}</p>
                        </a>
                     </div>
                     <div class="disc">
                        <span class="font2">原创</span>
                        <span class="el-icon-reading view">{{i.BlogView}}</span>  
                        <span class="el-icon-timer createtime">{{i.CreateTime}}</span>   
                        <a href="javascript:void()"  class="search" @click="readblog(i.BlogID)"> 查看 </a>  
                        <span class="fenge1">|</span>   
                        <a href="javascript:void()" class="comment" @click="bancommnet(i.BlogID,i.EnableComment)" v-if="i.EnableComment==0">禁止评论</a> 
                        <a href="javascript:void()" class="comment" @click="bancommnet(i.BlogID,i.EnableComment)" v-if="i.EnableComment==1">允许评论</a> 
                        <span class="fenge2">|</span>  
                        <a href="javascript:void()" class="delete" @click="deleteblog(i.BlogID,i.IsDeleted)">删除</a>                     
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </el-tab-pane>
      </el-tabs>   
   </el-row>
  </div>
</template>

<script>
import {apiurl} from "../../service/api.js";
import usernavbar from '../../assets/navbar.png'

export default {
   created(){
      this.showblog()
   },
   data(){
      return{
        blogpool :[],   //文章列表
      }
   },methods:{
      showblog(){
         var that = this
         that.$axios.get({
            url:apiurl.blogmanage,
         }).then(res=>{
            // console.log(res.data.data)
            var obj = res.data.data
            for (var i in obj){
               that.blogpool.push(obj[i])
            }
         })
      },
      bancommnet(BlogID,EnableComment){
         var that = this
         if (EnableComment == 0){
            var psd = {
            blogid : BlogID,
            code : 1
            }
            that.$axios.post({
               url : apiurl.bancomment,
               data : psd
            }).then(res=>{
               that.blogpool.splice(0,that.blogpool.length)
               that.showblog()
               // console.log(res.data)
            })
         }else{
            var psd = {
            blogid : BlogID,
            code : 0
            }
            that.$axios.post({
               url : apiurl.bancomment,
               data : psd
            }).then(res=>{
               that.blogpool.splice(0,that.blogpool.length)
               that.showblog()
               // console.log(res.data)
            })
         }   
      },
      deleteblog(BlogID,status){
         var that = this
         if(status==0){
            var psd = {
            blogid : BlogID,
            isdelete : 1
            }
         that.$axios.post({
            url : apiurl.deleteblog,
            data : psd
         }).then(res=>{
            that.blogpool.splice(0,that.blogpool.length)
            that.showblog()
            // console.log(res.data)
         })
         }else if(status==1){
            var psd = {
            blogid : BlogID,
            isdelete : 0
            }
         that.$axios.post({
            url : apiurl.deleteblog,
            data : psd
         }).then(res=>{
            that.blogpool.splice(0,that.blogpool.length)
            that.showblog()
            // console.log(res.data)
         })
         }        
      },
      readblog(BlogID){
         window.open('/#/tblog/p/'+BlogID)
      }
   } 
}
</script>



<style  scoped>
.app{

   position:absolute;
   top: 100px;
}
/*渐入动画*/
.userInfo
{     
    padding-left : 245px;
    padding-top: 2%;
	 position:absolute;

	 animation:mymove 1s forwards;
}

@keyframes mymove
{
	from {left:-1000px;}
	to {left:0px;}
}

.aside{
   height: 330px;
   /* width: 80%; */
}
.tag{
   height: 66px;
   font-size: 20px;
   color:rgb(0, 162, 255);
   text-decoration:none;
}
.choice{
   padding-top: 20%;
   text-align: center;
}
.editfont{
   color: black;
   font-size: 12px;
}
.main{
   overflow: scroll;
   overflow-x:hidden;
   height: 400px;
   width: 100%;
}
.list{
   margin-top: 10px;
}
.pagenavbar{
   width: 98%;
   height: 80px;
   background: white;
   /* border-bottom: 5px solid rgba(243, 238, 238, 0.924); */
   border-radius: 5px;
   border: 1px solid #8AC007;
}
.title a{
   color:black;
   text-decoration:none;
}
.font1{
   margin-left: 10px;
   font-size: 15px;
   font-weight: bold
}
.disc{
   margin-left: 12px;
   width: 100%;
   height: 15px;
}
.font2{
   font-family: 'Courier New', Courier, monospace;
   font-size: 12px;
}
.view{
   margin-left: 30px;
}
.createtime{
   margin-left: 30px;
}
.search{
   /* position: absolute; */
   margin-left: 250px;
   color:rgb(0, 162, 255);
   text-decoration:none;
}
.fenge1{
   /* position: absolute; */
   color: rgba(144, 144, 158, 0.952);
   margin-left: 10px;
}
.comment{
   /* position: absolute; */
   margin-left: 10px;
   color:rgb(0, 162, 255);
   text-decoration:none;
}
.fenge2{
   /* position: absolute; */
   color: rgba(144, 144, 158, 0.952);
   margin-left: 10px;
}
.delete{
   /* position: absolute; */
   margin-left: 10px;
   color:rgb(241, 46, 12);
   text-decoration:none;
}
.banfont{
   height: 10px;
   width: 20px;
   color: red;
   margin-right: 10px;
   border:1px solid gray;
}

.border-card{
   left: 450px;
   height: 100%;
   width: 800px;
   background: rgba(224, 221, 221, 0.938);
   position:absolute;
}
::-webkit-scrollbar-track-piece{ 
background-color:#f8f8f8;
}
::-webkit-scrollbar {
width:5px;
height:3px;
}
::-webkit-scrollbar-thumb {
background-color:gray;
background-clip:padding-box;
min-height:28px;
}
::-webkit-scrollbar-thumb:hover {
background-color:#bbb;
}


</style>